import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import './App.css';

// 导入各个Hook演示页面
import UseStateDemo from './pages/UseStateDemo';
import UseEffectDemo from './pages/UseEffectDemo';
import UseContextDemo from './pages/UseContextDemo';
import UseReducerDemo from './pages/UseReducerDemo';
import UseRefDemo from './pages/UseRefDemo';
import UseMemoCallbackDemo from './pages/UseMemoCallbackDemo';
import UseLayoutEffectDemo from './pages/UseLayoutEffectDemo';
import CustomHooksDemo from './pages/CustomHooksDemo';

// 导入 Context Provider
import { ThemeProvider } from './context/ThemeContext';
import { UserProvider } from './context/UserContext';

function App() {
  return (
    <Router>
      <div className="app">
        <nav className="navbar">
          <div className="nav-container">
            <Link to="/" className="nav-logo">
              React Hooks 学习演示
            </Link>
            <ul className="nav-menu">
              <li><Link to="/">首页</Link></li>
              <li><Link to="/use-state">useState</Link></li>
              <li><Link to="/use-effect">useEffect</Link></li>
              <li><Link to="/use-context">useContext</Link></li>
              <li><Link to="/use-reducer">useReducer</Link></li>
              <li><Link to="/use-ref">useRef</Link></li>
              <li><Link to="/use-memo-callback">useMemo & useCallback</Link></li>
              <li><Link to="/use-layout-effect">useLayoutEffect</Link></li>
              <li><Link to="/custom-hooks">自定义Hooks</Link></li>
            </ul>
          </div>
        </nav>

        <main className="main-content">
          <Routes>
            <Route path="/" element={<UseStateDemo />} />
            <Route path="/use-state" element={<UseStateDemo />} />
            <Route path="/use-effect" element={<UseEffectDemo />} />
            <Route path="/use-context" element={<UseContextDemo />} />
            <Route path="/use-reducer" element={<UseReducerDemo />} />
            <Route path="/use-ref" element={<UseRefDemo />} />
            <Route path="/use-memo-callback" element={<UseMemoCallbackDemo />} />
            <Route path="/use-layout-effect" element={<UseLayoutEffectDemo />} />
            <Route path="/custom-hooks" element={<CustomHooksDemo />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;
